<template>
	<view class="mapBox">
		<map style="width: 100%;height: 900rpx;" v-if="mapInfo.id" :latitude="mapInfo.location[0]"
			:longitude="mapInfo.location[1]" :show-scale="true" :markers="mapInfo.markers" :enable-3D="true" :show-compass="true" :enable-overlooking="true" :enable-traffic="true" theme="satellite"></map>
	</view>
	<view class="infos">
		<view class="tit">
			当前游玩项目：{{mapInfo.title}}
		</view>
		<view class="stars">
			<text>项目推荐：</text>
			<up-rate :count="count" v-model="mapInfo.count"></up-rate>
		</view>
		<view class="scrollView">
			<up-scroll-list :indicator="true" indicatorColor="#fff0f0" indicatorActiveColor="#f56c6c">
				<view class="items" v-for="(item,index) in mapInfo.other" :key="item.id">
					<image class="img" :src="item.url" mode="aspectFill"></image>
					<view class="title">
						{{item.name}}
					</view>
				</view>

			</up-scroll-list>
		</view>
	</view>
</template>

<script setup>
	import {
		onLoad
	} from '@dcloudio/uni-app'

	import {
		reactive,
		ref
	} from 'vue'

	import {
		projectInfo
	} from '../../api/api';

	// ----------------------------------------------
	// 地图数据
	const mapInfo = ref({})
	const count = ref(5)
	onLoad((option) => {
		projectInfo(option.id).then(res => {
			mapInfo.value = res
		})
	})
</script>

<style lang="scss">
	.infos {
		padding: 20rpx;
		box-sizing: border-box;

		.tit {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
		}

		.stars {
			font-size: 28rpx;
			margin: 20rpx 0 40rpx;
			display: flex;
		}

		.items {
			margin-right: 20rpx;
			text-align: center;
		}

		.img {
			width: 320rpx;
			height: 200rpx;
			border-radius: 14rpx;
		}

		.title {
			font-size: 28rpx;
			font-weight: 600;
			color: #333;
		}

	}
</style>